
var app=new Vue
({
    el:'#app',
    data:
    {
        list:
        [
            {
                id:1,   
                name:'iPhone7',
                price:6188,
                count:1,
                IsChecked:true
            },
            {
                id:2,
                name:'iPad Pro',
                price:5888,
                count:1,
                IsChecked:true
            },
            {
                id:3,
                name:'MacBook Pro',
                price:21488,
                count:1,
                IsChecked:true
            }
        ],
        inputCkecked:true
    },
    computed:
    {
        totalPrice:function()
        {
            var total=0;
            for(var i=0;i<this.list.length;i++)
            {
                var item=this.list[i];
                total += item.price * item.count;
            }
            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
        }
    },
    methods:
    {
        handleReaduce:function(index)
        {
            if(this.list[index].count===1) return;
            this.list[index].count--;
        },
        handleAdd:function(index)
        {
            this.list[index].count++;
        },
        handleRemove:function(index)
        {
            this.list.splice(index,1);
        },
        handleChecked:function()
        {
            this.list.forEach(element => {
                element.IsChecked=this.inputCkecked;
            });
        },
        handleChangeOther:function()
        {
            var isFalse=true;
            this.list.forEach(element => {
                if(element.IsChecked===false)
                {
                    isFalse=false;
                }
            });

            if(isFalse===false)
            {
                this.inputCkecked=false;
            }else
            {
                this.inputCkecked=true;
            }
        }
    }
})